<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品添加</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }
        h2 {
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 30px;
            font-weight: bold;
            line-height: 1.1;
        }
        a {
            color: #42b983;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="pro_list.html">返回</a>
        <h2>商品添加</h2>
        <el-form  :rules="rules" ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存">
                <el-input v-model="form.stock"></el-input>
            </el-form-item>
<!--            <el-form-item label="商品图片">-->
<!--&lt;!&ndash;               上传图片 &ndash;&gt;-->
<!--                <el-upload-->
<!--                    class="upload-demo"-->
<!--                    action="/product/upload"-->
<!--                    :file-list="fileList"-->
<!--                    :on-preview="handlePreview"-->
<!--                    :on-remove="handleRemove"-->
<!--                    :before-upload="customUpload"-->
<!--                    :multiple="false"-->
<!--                >-->
<!--                    <i class="el-icon-upload"></i>-->
<!--                    <div class="el-upload__tip" slot="tip" style="margin-top: 10px;">点击或拖动文件到此处，单文件大小不超过 500kb</div>-->
<!--                </el-upload>-->
<!--            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        name: '',
                        price: '',
                        description: '',
                        stock: ''
                    },
                    // // 上传图片相关
                    // imageUrl: '' , // 可以用于存储上传后的图片URL
                    // fileList: [], // 存储上传的文件列表
                    rules: {
                        name: [
                            { required: true, message: '请输入商品名称', trigger: 'blur' }
                        ],
                        price: [
                            { required: true, message: '请输入商品价格', trigger: 'blur' },
                            { type: 'number', message: '请输入正确的商品价格', trigger: 'blur' }
                        ],
                        description: [
                            { required: true, message: '请输入商品描述', trigger: 'blur' }
                        ],
                        stock: [
                            { required: true, message: '请输入商品库存', trigger: 'blur' },
                            { type: 'number', message: '请输入正确的商品库存', trigger: 'blur' }
                        ]
                    }
                }
            },
            methods: {
                // // 上传图片
                // handlePreview(file) {
                //     console.log(file);
                // },
                // handleRemove(file, fileList) {
                //     console.log(file, fileList);
                // },
                // customUpload(file) {
                //     // 在这里你可以添加一些自定义逻辑，比如文件大小检查
                //     const isImage = file.type.startsWith('image/');
                //     const isLt500kb = file.size / 1024 / 1024 < 0.5;
                //
                //     if (!isImage) {
                //         this.$message.error('上传文件只能是图片!');
                //     }
                //     if (!isLt500kb) {
                //         this.$message.error('上传图片大小不能超过 500KB!');
                //     }
                //     return isImage && isLt500kb;
                // },
                submitForm() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            axios.post('/product/pro_add', this.form)
                                .then(res => {
                                    if (res.data !== null) {
                                        console.log(res.data);
                                        window.location.href = 'pro_list.html';
                                        // this.$refs.form.resetFields();
                                    } else {
                                        console.log(res.data);
                                    }
                                })
                                .catch(err => {
                                    console.log(err);
                                });
                        } else {
                            this.$message.error('请检查输入项');
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>